<%@ page language="java" pageEncoding="UTF-8" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>smartlife</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/datepicker3.css" rel="stylesheet">
    <link href="../css/styles.css" rel="stylesheet">
    <link href="../css/c3.css" rel="stylesheet" type="text/css">

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="../js/c3.js"></script>
    <script src="../js/html5shiv.js"></script>
    <script src="../js/respond.min.js"></script>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header"><a class="navbar-brand" href="#"><span>gaoli</span>后台控制</a>
            <ul class="user-menu">
                <li class="dropdown pull-right"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
                        class="glyphicon glyphicon-user"></span> 用户 <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span> 个人资料</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-cog"></span> 设置</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> 布局</a></li>
                        <li><a href="arm"><span class="glyphicon glyphicon-th"></span> TEST</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- /.container-fluid -->
</nav>

<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
    <form role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="搜索">
        </div>
    </form>
    <ul class="nav menu">
        <li class="active"><a href="index"><span class="glyphicon glyphicon-dashboard"></span> 主页面</a></li>
        <li><a href="arm"><span class="glyphicon glyphicon-th"></span> TEST</a></li>
        <%--
        <li><a href="charts.html"><span class="glyphicon glyphicon-stats"></span> Charts</a></li>
        --%>
        <%--
        <li><a href="tables.html"><span class="glyphicon glyphicon-list-alt"></span> Tables</a></li>
        --%>
        <%--
        <li><a href="forms.html"><span class="glyphicon glyphicon-pencil"></span> Forms</a></li>
        --%>
        <%--
        <li><a href="panels.html"><span class="glyphicon glyphicon-info-sign"></span> Alerts &amp; Panels</a></li>
        --%>
        <%--
        <li class="parent "><a href="#"> <span class="glyphicon glyphicon-list"></span> Dropdown
            <span--
            %>
            <%--data-toggle="collapse" href="#sub-item-1" class="icon pull-right">
            <em--
            %>
            <%--class="glyphicon glyphicon-s glyphicon-plus"></em></span> </a>--%>
        <%--
        <ul class="children collapse" id="sub-item-1">--%>
        <%--
        <li><a class="" href="#"> <span class="glyphicon glyphicon-share-alt"></span> Sub Item 1 </a></li>
        --%>
        <%--
        <li><a class="" href="#"> <span class="glyphicon glyphicon-share-alt"></span> Sub Item 2 </a></li>
        --%>
        <%--
        <li><a class="" href="#"> <span class="glyphicon glyphicon-share-alt"></span> Sub Item 3 </a></li>
        --%>
        <%--
    </ul>
    --%>
        <%--
    </li>
    --%>
        <%--
        <li role="presentation" class="divider"></li>
        --%>
        <%--
        <li><a href="login.html"><span class="glyphicon glyphicon-user"></span> Login Page</a></li>
        --%>
    </ul>
</div>
<!--/.sidebar-->

<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
    <div class="row">
        <ol class="breadcrumb">
            <li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
            <li class="active">主页</li>
        </ol>
    </div>
    <!--/.主页-->

    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">欢迎使用智能生活平台！</h1>
        </div>
    </div>
    <!--/.欢迎-->

    <div class="row">
        <div class="col-xs-12 col-md-6 col-lg-3">
            <div class="panel panel-blue panel-widget ">
                <div class="row no-padding">
                    <div class="col-sm-3 col-lg-5 widget-left"><em
                            class="glyphicon glyphicon glyphicon-inbox glyphicon-l"></em></div>
                    <div class="col-sm-9 col-lg-7 widget-right">
                        <div class="large">XXX</div>
                        <div class="text-muted">坑位号</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 col-lg-3">
            <div class="panel panel-orange panel-widget">
                <div class="row no-padding">
                    <div class="col-sm-3 col-lg-5 widget-left"><em class="glyphicon glyphicon-comment glyphicon-l"></em>
                    </div>
                    <div class="col-sm-9 col-lg-7 widget-right">
                        <div class="large">0</div>
                        <div class="text-muted">null</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 col-lg-3">
            <div class="panel panel-teal panel-widget">
                <div class="row no-padding">
                    <div class="col-sm-3 col-lg-5 widget-left"><em class="glyphicon glyphicon-user glyphicon-l"></em>
                    </div>
                    <div class="col-sm-9 col-lg-7 widget-right">
                        <div class="large">0</div>
                        <div class="text-muted">null</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 col-lg-3">
            <div class="panel panel-red panel-widget">
                <div class="row no-padding">
                    <div class="col-sm-3 col-lg-5 widget-left"><em class="glyphicon glyphicon-stats glyphicon-l"></em>
                    </div>
                    <div class="col-sm-9 col-lg-7 widget-right">
                        <div class="large">0</div>
                        <div class="text-muted">null</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/.4格-->

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <font size="6" color="#008b8b">数据显示图</font>
                </div>

                <div class="panel-body">
                    <div id="chart"></div>
                </div>

                <div class="panel-footer">
                    <%--<div class="col-md-1">--%>
                    <%--<div class="input-group">--%>
                    <%--<button class="btn btn-primary" type="button" onclick="axis_range()">显示温度</button>--%>
                    <%--</div>--%>
                    <%--</div>--%>

                    <div class="col-xs-6 col-md-2">
                        <div class="input-group">
                            <span class="input-group-addon">Y最大值</span>
                            <input type="text" class="form-control" id="change_max" onchange="change_max()" value="40">
                        </div>
                    </div>

                    <div class="col-xs-6 col-md-2">
                        <div class="input-group">
                            <span class="input-group-addon">Y最小值</span>
                            <input type="text" class="form-control" id="change_min" onchange="change_min()" value="10">
                        </div>
                    </div>

                    <div class="col-md-1">
                        <div class="input-group">
                            <button class="btn btn-primary" type="button" onclick="req_data()">显示温度
                            </button>
                        </div>
                    </div>

                    <div class="col-xs-6 col-md-2">
                        <div class="input-group">
                            <span class="input-group-addon">设备编号</span>
                            <input type="text" class="form-control" id="input_deviceCode" value="00001">
                        </div>
                    </div>

                    <div class="col-xs-6 col-xs-2">
                        <div class="input-group">
                            <span class="input-group-addon">查询时间</span>
                            <input type="text" class="form-control" id="input_nHour" value="1">
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="input-group">
                            <span class="input-group-addon">显示限制</span>
                            <input type="text" class="form-control" id="input_nLimit" value="120">
                        </div>
                    </div>

                    <%--<div class="col-md-1">--%>
                    <%--<div class="input-group">--%>
                    <%--<button class="btn btn-primary" type="button" id="send_config1" onclick="req_data1()">显示实时数据</button>--%>
                    <%--</div>--%>
                    <%--</div>--%>
                    <br>
                    <br>
                </div>
            </div>

        </div>
    </div>
    <!--/.图表-->

    <%--<div class="row">--%>
    <%--<div class="col-lg-12">--%>
    <%--<div class="panel panel">--%>
    <%--<!-- Stack the columns on mobile by making one full-width and the other half-width -->--%>
    <%--<div class="row">--%>
    <%--<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>--%>
    <%--<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>--%>
    <%--</div>--%>

    <%--<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->--%>
    <%--<div class="row">--%>
    <%--<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>--%>
    <%--<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>--%>
    <%--<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>--%>
    <%--</div>--%>

    <%--<!-- Columns are always 50% wide, on mobile and desktop -->--%>
    <%--<div class="row">--%>
    <%--<div class="col-xs-6">.col-xs-6</div>--%>
    <%--<div class="col-xs-6">.col-xs-6</div>--%>
    <%--</div>--%>

    <%--</div>--%>
    <%--</div>--%>
    <%--</div>--%>
    <%--<!--/.测试-->--%>

    <div class="row">
        <div class="col-xs-6 col-md-3">
            <div class="panel panel-default">
                <div class="panel-body easypiechart-panel">
                    <h4 id="realtime_temp">实时温度</h4>

                    <div class="easypiechart" id="easypiechart-blue" data-percent="0">
                        <span class="percent" id="easypiechart-blue-display">0%</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xs-6 col-md-3">
            <div class="panel panel-default">
                <div class="panel-body easypiechart-panel">
                    <h4 id="realtime_humi">实时湿度</h4>

                    <div class="easypiechart" id="easypiechart-orange" data-percent="0">
                        <span class="percent" id="easypiechart-orange-display">0%</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xs-6 col-md-3">
            <div class="panel panel-default">
                <div class="panel-body easypiechart-panel">
                    <h4>空缺</h4>

                    <div class="easypiechart" id="easypiechart-teal" data-percent="0">
                        <span class="percent" id="">0%</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xs-6 col-md-3">
            <div class="panel panel-default">
                <div class="panel-body easypiechart-panel">
                    <h4>空缺</h4>

                    <div class="easypiechart" id="easypiechart-red" data-percent="0"><span class="percent">0%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/.温湿度-->

    <%--<div class="row">--%>
    <%--<div class="col-md-8">--%>
    <%--<div class="panel panel-default chat">--%>
    <%--<div class="panel-heading" id="accordion"><span class="glyphicon glyphicon-comment"></span> Chat</div>--%>
    <%--<div class="panel-body">--%>
    <%--<ul>--%>
    <%--<li class="left clearfix"><span class="chat-img pull-left"> <img--%>
    <%--src="http://placehold.it/80/30a5ff/fff" alt="User Avatar" class="img-circle"/> </span>--%>

    <%--<div class="chat-body clearfix">--%>
    <%--<div class="header"><strong class="primary-font">John Doe</strong>--%>
    <%--<small class="text-muted">32 mins ago</small>--%>
    <%--</div>--%>
    <%--<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante turpis, rutrum--%>
    <%--ut ullamcorper sed, dapibus ac nunc. Vivamus luctus convallis mauris, eu gravida--%>
    <%--tortor aliquam ultricies. </p>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--<li class="right clearfix"><span class="chat-img pull-right"> <img--%>
    <%--src="http://placehold.it/80/dde0e6/5f6468" alt="User Avatar"--%>
    <%--class="img-circle"/> </span>--%>

    <%--<div class="chat-body clearfix">--%>
    <%--<div class="header"><strong class="pull-left primary-font">Jane Doe</strong>--%>
    <%--<small class="text-muted">6 mins ago</small>--%>
    <%--</div>--%>
    <%--<p> Mauris dignissim porta enim, sed commodo sem blandit non. Ut scelerisque sapien eu--%>
    <%--mauris faucibus ultrices. Nulla ac odio nisl. Proin est metus, interdum scelerisque--%>
    <%--quam eu, eleifend pretium nunc. Suspendisse finibus auctor lectus, eu interdum--%>
    <%--sapien. </p>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--<li class="left clearfix"><span class="chat-img pull-left"> <img--%>
    <%--src="http://placehold.it/80/30a5ff/fff" alt="User Avatar" class="img-circle"/> </span>--%>

    <%--<div class="chat-body clearfix">--%>
    <%--<div class="header"><strong class="primary-font">John Doe</strong>--%>
    <%--<small class="text-muted">32 mins ago</small>--%>
    <%--</div>--%>
    <%--<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante turpis, rutrum--%>
    <%--ut ullamcorper sed, dapibus ac nunc. Vivamus luctus convallis mauris, eu gravida--%>
    <%--tortor aliquam ultricies. </p>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--<div class="panel-footer">--%>
    <%--<div class="input-group">--%>
    <%--<input id="btn-input" type="text" class="form-control input-md"--%>
    <%--placeholder="Type your message here..."/>--%>
    <%--<span class="input-group-btn">--%>
    <%--<button class="btn btn-success btn-md" id="btn-chat">Send</button>--%>
    <%--</span></div>--%>
    <%--</div>--%>
    <%--</div>--%>
    <%--</div>--%>
    <%--<!--/.col-->--%>

    <%--<div class="col-md-4">--%>
    <%--<div class="panel panel-blue">--%>
    <%--<div class="panel-heading dark-overlay"><span class="glyphicon glyphicon-check"></span>To-do List</div>--%>
    <%--<div class="panel-body">--%>
    <%--<ul class="todo-list">--%>
    <%--<li class="todo-list-item">--%>
    <%--<div class="checkbox">--%>
    <%--<input type="checkbox" id="checkbox"/>--%>
    <%--<label for="checkbox">Make a plan for today</label>--%>
    <%--</div>--%>
    <%--<div class="pull-right action-buttons"><a href="#"><span--%>
    <%--class="glyphicon glyphicon-pencil"></span></a> <a href="#" class="flag"><span--%>
    <%--class="glyphicon glyphicon-flag"></span></a> <a href="#" class="trash"><span--%>
    <%--class="glyphicon glyphicon-trash"></span></a></div>--%>
    <%--</li>--%>
    <%--<li class="todo-list-item">--%>
    <%--<div class="checkbox">--%>
    <%--<input type="checkbox" id="checkbox"/>--%>
    <%--<label for="checkbox">Update Basecamp</label>--%>
    <%--</div>--%>
    <%--<div class="pull-right action-buttons"><a href="#"><span--%>
    <%--class="glyphicon glyphicon-pencil"></span></a> <a href="#" class="flag"><span--%>
    <%--class="glyphicon glyphicon-flag"></span></a> <a href="#" class="trash"><span--%>
    <%--class="glyphicon glyphicon-trash"></span></a></div>--%>
    <%--</li>--%>
    <%--<li class="todo-list-item">--%>
    <%--<div class="checkbox">--%>
    <%--<input type="checkbox" id="checkbox"/>--%>
    <%--<label for="checkbox">Send email to Jane</label>--%>
    <%--</div>--%>
    <%--<div class="pull-right action-buttons"><a href="#"><span--%>
    <%--class="glyphicon glyphicon-pencil"></span></a> <a href="#" class="flag"><span--%>
    <%--class="glyphicon glyphicon-flag"></span></a> <a href="#" class="trash"><span--%>
    <%--class="glyphicon glyphicon-trash"></span></a></div>--%>
    <%--</li>--%>
    <%--<li class="todo-list-item">--%>
    <%--<div class="checkbox">--%>
    <%--<input type="checkbox" id="checkbox"/>--%>
    <%--<label for="checkbox">Drink coffee</label>--%>
    <%--</div>--%>
    <%--<div class="pull-right action-buttons"><a href="#"><span--%>
    <%--class="glyphicon glyphicon-pencil"></span></a> <a href="#" class="flag"><span--%>
    <%--class="glyphicon glyphicon-flag"></span></a> <a href="#" class="trash"><span--%>
    <%--class="glyphicon glyphicon-trash"></span></a></div>--%>
    <%--</li>--%>
    <%--<li class="todo-list-item">--%>
    <%--<div class="checkbox">--%>
    <%--<input type="checkbox" id="checkbox"/>--%>
    <%--<label for="checkbox">Do some work</label>--%>
    <%--</div>--%>
    <%--<div class="pull-right action-buttons"><a href="#"><span--%>
    <%--class="glyphicon glyphicon-pencil"></span></a> <a href="#" class="flag"><span--%>
    <%--class="glyphicon glyphicon-flag"></span></a> <a href="#" class="trash"><span--%>
    <%--class="glyphicon glyphicon-trash"></span></a></div>--%>
    <%--</li>--%>
    <%--<li class="todo-list-item">--%>
    <%--<div class="checkbox">--%>
    <%--<input type="checkbox" id="checkbox"/>--%>
    <%--<label for="checkbox">Tidy up workspace</label>--%>
    <%--</div>--%>
    <%--<div class="pull-right action-buttons"><a href="#"><span--%>
    <%--class="glyphicon glyphicon-pencil"></span></a> <a href="#" class="flag"><span--%>
    <%--class="glyphicon glyphicon-flag"></span></a> <a href="#" class="trash"><span--%>
    <%--class="glyphicon glyphicon-trash"></span></a></div>--%>
    <%--</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--<div class="panel-footer">--%>
    <%--<div class="input-group">--%>
    <%--<input id="btn-input" type="text" class="form-control input-md" placeholder="Add new task"/>--%>
    <%--<span class="input-group-btn">--%>
    <%--<button class="btn btn-primary btn-md" id="btn-todo">Add</button>--%>
    <%--</span></div>--%>
    <%--</div>--%>
    <%--</div>--%>
    <%--</div>--%>
    <!--/.col-->
</div>
<!--/.chat-->
</div>
<!--/.main-->

<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/chart.min.js"></script>
<script src="../js/chart-data.js"></script>
<script src="../js/easypiechart.js"></script>
<script src="../js/easypiechart-data.js"></script>
<script src="../js/bootstrap-datepicker.js"></script>
<script>
    $('#calendar').datepicker({});

    !function ($) {
        $(document).on("click", "ul.nav li.parent > a > span.icon", function () {
            $(this).find('em:first').toggleClass("glyphicon-minus");
        });
        $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
    }(window.jQuery);

    $(window).on('resize', function () {
        if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
    })
    $(window).on('resize', function () {
        if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
    })
</script>

<script>
    var chart;
    var send_data;
    var send_json_data;
    var id_url;
    function req_data() {
        id_url = "/getDataFromSQL.inner";

        send_data = {
            deviceCode: ($("#input_deviceCode").val()),
            nHour: ($("#input_nHour").val()),
            nLimit: ($("#input_nLimit").val())
        };
        send_json_data = (JSON.stringify(send_data));

        $.ajax({
            type: 'POST',
            url: id_url,
            contentType: 'application/json',
            dataType: "json",
            data: send_json_data,
            timeout: 10000,
            success: function (receive_data) {
                chart.load(
                        receive_data
                );
                chart.transform('area-step', receive_data.x);
            }
        });
    }

    chart = c3.generate({
        data: {
            xFormat: '%Y-%m-%d %H:%M:%S',
//            x: 'time',
//            columns: [
//                ['time', '2013-01-01 01:01:01', '2013-01-02 01:01:01', '2013-01-03 01:01:01', '2013-01-04 01:01:01', '2013-01-05 01:01:01', '2013-01-06 01:01:01'],
//                ['data1', 30, 200, 100, 400, 150, 250],
//                ['data2', 130, 340, 200, 500, 250, 350]
//            ],
            columns: []
//            types: {
//                data1: 'area'
//            }


        },
        axis: {
            x: {
                label: {
                    text: 'X Label',
                    position: 'inner-left'
                },
                type: 'timeseries',
                tick: {
                    culling: {
                        max: 20// the number of tick texts will be adjusted to less than this value
                    },
                    fit: true,
                    rotate: 30,
                    format: '%d号%H时%M分'
                }
            },
            y: {
                max: 40,
                min: 10,
                label: {
                    text: 'Y Label',
                    position: 'outer-middle'
                },
                tick: {
                    count: 10,
                    format: function (y) {
                        return y.toFixed(1);
                    }
                }
            }

        },
        legend: {
            position: 'bottom'
        },
        padding: {
            bottom: 10,
            right: 30
        },
        grid: {
            y: {
                show: true
            },
            x: {
                show: true
            }
        },
        tooltip: {
            enabled: true,
            format: {
//                title: function (x) { return '时间：' + x; }
            }
        },
        zoom: {
            enabled: true
        },
        subchart: {
            //show: true
        }
    });
</script>

<script>
    var id_url1 = "/getRealtimeFromSQL.inner";
    var send_json_data1;
    var send_data1;
    function change_max() {
        var tem = $('#change_max').val();
        chart.axis.max({y: Number(tem)});
    }

    function change_min() {
        var tem = $('#change_min').val();
        chart.axis.min({y: Number(tem)});
    }

/*    setTimeout("req_data1()", 30000);*/
    function req_data1() {
        send_data1 = {
            deviceCode: ($("#input_deviceCode").val())
        };

        send_json_data1 = (JSON.stringify(send_data1));

        $.ajax({
            type: 'POST',
            url: id_url1,
            contentType: 'application/json',
            dataType: "json",
            data: send_json_data1,
            timeout: 10000,
            success: function (data) {
                $('#easypiechart-blue').data('easyPieChart').update(data.dataTempture);
                $('#easypiechart-blue-display').text(data.dataTempture);
                $('#easypiechart-orange').data('easyPieChart').update(data.dataHumidity);
                $('#easypiechart-orange-display').text(data.dataHumidity);
                $('#realtime_temp').text("实时温度 " + data.receiveTime);
                $('#realtime_humi').text("实时湿度 " + data.receiveTime);
                setTimeout("req_data1()", 30000);
            }
        });
    }
</script>
</body>
</html>
